<template>
    <BaseContent>
        <div class="card" v-if="searchResults.length !== 0">
            <div class="card-body">
                <div class="card mb-3 card-book-info" @click="to_know(searchresult.id)" style="max-width: 540px;" v-for="searchresult in searchResults" :key="searchresult.id">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img :src="searchresult.photo" class="img-fluid rounded-start" alt="...">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">{{ searchresult.title }}</h5>
                                <p class="card-text">{{ searchresult.author }}</p>
                                <p class="card-text" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">{{ searchresult.description }}</p>
                                <div class="error_info">{{ error_info }}</div>
                                <button type="button" class="btn btn-danger" @click.stop="to_borrowe_book(searchresult.id, searchresult.photo, searchresult.title, searchresult.description, searchresult.score, searchresult.stock, searchresult.publisher, searchresult.author)">我要借书</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open">
            <div class="mb-3">
                <div class="info_confirm">请确认学号是否正确</div>
                <input type="text" class="form-control" :placeholder="$store.state.user.username" disabled>
                <div class="info_confirm">请确认是否是所选书籍</div>
                <input type="text" class="form-control" :placeholder="borrowed_title" disabled>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_borrow">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
        <div class="card card-search-empty" v-if="searchResults.length === 0">
            <div class="card-body">
                <h1>未查询到任何结果</h1>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { computed } from 'vue';
import $ from 'jquery';
import dayjs from 'dayjs';

export default {
    name: "SearchBookView",
    components: {
        BaseContent
    },
    setup() {
        const store = useStore();
        const searchResults = computed(() => store.state.search.searchResults);
        const router = useRouter();
        const borrwoed_book_list = ref([]);
        const is_apply = ref('');
        const error_info = ref('');
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        const is_open = ref(false);
        const borrowed_bookid = ref('');
        const borrowed_photo = ref('');
        const borrowed_title = ref('');
        const borrowed_description = ref('');
        const borrowed_score = ref('');
        const borrowed_stock = ref('');
        const borrowed_publisher = ref('');
        const borrowed_author = ref('');
        $.ajax({
            url: "http://47.121.28.202:8000/settings/borrowedbooks/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id,
            },
            success(resp) {
                borrwoed_book_list.value = resp;
            }
        })

        const to_know = (bookid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'bookinfo',
                    params: {
                        bookid
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const to_borrowe_book = (bookid, photo, title, description, score, stock, publisher, author) => {
            is_open.value = true; 
            borrowed_bookid.value = bookid;
            borrowed_photo.value = photo;
            borrowed_title.value = title;
            borrowed_description.value = description;
            borrowed_score.value = score;
            borrowed_stock.value = stock;
            borrowed_publisher.value = publisher;
            borrowed_author.value = author;
        }

        const confirm_borrow = () => {
            error_info.value = "";
            const is_have = ref(false);
            for (let i of borrwoed_book_list.value) {
                if (i.book_id === parseInt(borrowed_bookid.value)) {
                    is_have.value = true;
                    error_info.value = "你的书架已存在这本书，请勿重复借阅"
                }
            } 
            if (!is_have.value) {
                is_apply.value = "false";
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/borrowedbooks/",
                    type: "POST",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        photo: borrowed_photo.value,
                        user_id: store.state.user.id,
                        book_id: parseInt(borrowed_bookid.value),
                        bookname: borrowed_title.value,
                        bookauthor: borrowed_author.value,
                        studentid: store.state.user.username,
                        borrowedtime: formattedDate,
                        description: borrowed_description.value,
                        is_apply: is_apply.value,
                        bookscore: parseInt(borrowed_score.value),
                        bookstock: parseInt(borrowed_stock.value),
                        bookpublisher: borrowed_publisher.value,
                    },
                    success() {
                        is_open.value = false;
                    }
                })
            }
        }

        const close = () => {
            is_open.value = false; 
        }

        return {
            searchResults,
            to_know,
            to_borrowe_book,
            error_info,
            is_open,
            confirm_borrow,
            close,
            borrowed_title
        }
    }
}
</script>

<style scoped>
.card-book-info {
    height: 300px;
    display: inline-block;
    margin-left: 50px;
    cursor: pointer;
}
.img-fluid {
    height: 300px;
    width: 200px;
}
.btn-danger {
    width: 100%;
}
.error_info {
    color: red;
}
.card-search-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    margin-right: 10px;
    margin-left: 10px
}
</style>